import { Form, Input, Button, Table, Popconfirm, Space ,Pagination ,message} from "antd";
import {observer} from 'mobx-react';
import {useState,useEffect} from 'react';
import "../Vehicle_entry_record/Vehicle_entry_record.scss";
import './Visitor_entry_record.scss'
import http from '../../utils/http';
import store from '../../store/index';
// 转换数据
const format=(data)=>{
  let   arr=data.map((v,i)=>{
        return {
            key:v.visId, 
            vireId:v.vireId,
            visName:v.visName, //访客姓名
            visPhone:v.visPhone, //联系方式
            vireType:v.vireType == 0 ? '企业' : (v.visType == 1?'公寓':'其他' ), //造访类型
            vireDirection:v.vireDirection, //进出方向
            vireStarttime:toTime(v.vireStarttime), //造访开始时间
            vireEndtime:toTime(v.vireEndtime), //造访结束时间
        }
    })
    store.dongji.showData=arr;
} 
//转换时间格式
const toTime = (value) => {
  let date = new Date(value)
  let y = date.getFullYear()  //获取年份
  let m = date.getMonth() + 1  //获取月份ma
  m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
  let d = date.getDate()  //获取日期
  d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
  return y + "-" + m + "-" + d

}

const Vehicle_entry_record = () => {
  
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 进页面获取数据
  useEffect(()=>{
    http({
      url:'/visit-record/visitRecordList',
    }).then((res)=>{
      // console.log(res);
      format(res.data.data);
      store.dongji.showCount=res.data.count
  })  
  },[])
  // 分页
  const pageChange=(current,size)=>{
    store.dongji.showCurrent=current
    http({
      url:'/visit-record/visitRecordList',
      params:{
        current:current,
        size:size,
        visName:searchForm.getFieldsValue(true).visName?searchForm.getFieldsValue(true).visName:'',
        visPhone:searchForm.getFieldsValue(true).visPhone?searchForm.getFieldsValue(true).visPhone:'',
      }
    }).then((res)=>{
      if(res.code==200){
        format(res.data.data);
      }
      
    })
  }
  //查询
  const search = () => {
    // console.log(searchForm.getFieldsValue(true));
    http({
      url:'/visit-record/visitRecordList',
      params:{
        // current: store.dongji.showCurrent,
        visName:searchForm.getFieldsValue(true).visName?searchForm.getFieldsValue(true).visName:'',
        visPhone:searchForm.getFieldsValue(true).visPhone?searchForm.getFieldsValue(true).visPhone:'',
      }
    }).then((res)=>{
      if(res.code==200){
        format(res.data.data);
        store.dongji.showCount=res.data.count
        store.dongji.showCurrent=1
      }else{
        message.error({
          content: '请输入正确的查询数据',
          className: 'custom-class',
          style: {
            marginTop: '20vh',
          },
        });
      }
      
    })
  };
  // 重置
  const resize = () => {
    searchForm.resetFields();
    setSelectedRowKeys([])
    http({
      url:'/visit-record/visitRecordList',
    }).then((res)=>{
      format(res.data.data);
      store.dongji.showCount=res.data.count
      store.dongji.showCurrent=1
    })
  };
  const [searchForm] = Form.useForm();
 //删除
  const del=(data)=> {
  console.log(data.vireId);
  let  arr=new Array
  arr.push(data.vireId)
  http({
    url:'/visit-record/deleteVisitRecord',
    method:'post',
    data:arr,
  }).then((res)=>{
    console.log(res);
    if(res.code==200){
      message.success({
          content: '删除成功',
          className: 'custom-class',
          style: {
            marginTop: '20vh',
          },
        });
      http({
          url:'/visit-record/visitRecordList',
          params:{
              current:store.dongji.showCurrent  
          }
      }).then((res)=>{
          format(res.data.data)
          store.dongji.showCount=res.data.count;
      })
  }
  })
}
  //批量删除
  const delAll=()=>{
    let arr=store.dongji.delArr
    http({
      url:'/visit-record/deleteVisitRecord',
      method:'post',
      data:arr,
    }).then((res)=>{
      console.log(res);
      if(res.code==200){
        message.success({
            content: '删除成功',
            className: 'custom-class',
            style: {
              marginTop: '20vh',
            },
          });
        http({
            url:'/visit-record/visitRecordList',
            params:{
                current:store.dongji.showCurrent  
            }
        }).then((res)=>{
            format(res.data.data)
            store.dongji.showCount=res.data.count;
        })
    }
    })   
}
  const exportVisitor = () => {
    console.log(11);
    // http({
    //   url:'/visit-record/downVisitRecord',
    // }).then((res)=>{
    //   console.log(res);
    // })
  };
  function cancel(e) {}

 
  const columns = [
    {
      title: "访客姓名",
      dataIndex: "visName",
      render: (text) => <a href="/">{text}</a>,
    },
    {
      title: "联系方式",
      dataIndex: "visPhone",
    },
    {
      title: "造访类型",
      dataIndex: "vireType",
    },
    {
      title: "造访时间",
      dataIndex: "vireStarttime",
    },
   
    {
      title: "进出方向",
      dataIndex: "vireDirection",
    },
    {
      title: "造访结束时间",
      dataIndex: "vireEndtime",
    },

    {
      title: "操作",
      dataIndex: "operation",
      render: (text, record) => (
        <Space size="middle">
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => {
              del(record);
            }}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <a href="/">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
 

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys)
      let arr=[];
      for(let i=0;i<selectedRows.length;i++ ){
        arr.push(selectedRows[i].vireId)
      }
    store.dongji.delArr=arr
    // console.log(store.dongji.delArr);
    },
    getCheckboxProps: (record) => ({
      name: record.name,
    }),
    selectedRowKeys
  };

  return (
    <div className="roleContent">
      <Form
        name="horizontal_login"
        layout="inline"
        className="title"
      >
        <Form.Item name="username">
          <div className="kuai">
            <span></span>
            <span>访客进出记录</span>
          </div>
        </Form.Item>
        <Form.Item className="btn">
          <div>
            <Button className="cha" type="primary" onClick={exportVisitor}>
              导出
            </Button>
            <Button className="resize" onClick={delAll} type="primary">
              批量删除
            </Button>
          </div>
        </Form.Item>
      </Form>
      <div className="biao">
        <Form
          form={searchForm}
          name="horizontal_login"
          layout="inline"
          className="Role"
        >
          <Form.Item name="visName" label="访客姓名">
            <Input placeholder="请输入访客姓名" />
          </Form.Item>
          <Form.Item name="visPhone" label="联系方式">
            <Input  placeholder="请输入联系方式" />
          </Form.Item>
          <Form.Item className="btn">
            <div>
              <Button className="cha" type="primary" onClick={search}>
                查询
              </Button>
              <Button className="resize" onClick={resize} type="primary">
                重置
              </Button>
            </div>
          </Form.Item>
        </Form>
        <Table
          className="table1"
          rowSelection={{
            ...rowSelection,
          }}
          pagination={false}
          columns={columns}
          dataSource={store.dongji.showData}
        />
             <Pagination className='page' defaultCurrent={1}  current={store.dongji.showCurrent}
              total={store.dongji.showCount} onChange={pageChange}/>
      </div>
    </div>
  );
};

export default observer(Vehicle_entry_record);
